<!--
 * 购物车挂历页面
 *
 * @Author: ShanZhu
 * @Date: 2024-01-24
-->
<template>
  <div class="cart-container">
    <!--   操作面板   -->
    <el-card class="header-card">
      <div class="card-header">
        <h2 class="my-title">我的购物车</h2>
        <div>
          <el-button
            v-if="!list || list.length === 0"
            class="buy"
            type="primary"
            @click="onBuyClick"
          >下单</el-button>
          <el-popconfirm
            v-else
            :title="orderMsg"
            @confirm="doBuy"
          >
            <el-button class="buy" type="primary" slot="reference" @click="buy">下单</el-button>
          </el-popconfirm>
          <el-popconfirm
            title="确定清空购物车吗？"
            @confirm="deleteAllCart"
          >
            <el-button type="danger" slot="reference" style="margin-left:10px">删除全部</el-button>
          </el-popconfirm>
        </div>
      </div>
    </el-card>
    <!--   表格面板   -->
    <el-card class="table-card">
      <el-table
        :data="list"
        class="my-el-table"
      >
        <el-table-column
          label="#"
          type="index"
          width="150">
        </el-table-column>

        <el-table-column
          prop="flower"
          label="商品"
        >
        </el-table-column>

        <el-table-column
          prop="amount"
          label="数量"
        >
        </el-table-column>

        <el-table-column
          prop="price"
          label="价格(元)"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="doDelete"
            >
              <el-button type="danger" slot="reference" @click="del(scope.row.id)">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        orderMsg: '',
        delId: 0,
        popVisible: false,
      }
    },
    methods: {

      pageChange(page) {
        this.refresh(page);
      },

      refresh(page) {
        if (page === undefined) {
          page = 1;
        }
        //window.sessionStorage.getItem('token')
        this.$http.get("/cart/queryByAccount?account=" + window.sessionStorage.getItem('token')).then(result => {
          let R = result.data;
          this.list = R.data;
        })
      },
      del(id){
        this.delId = id;
      },
      onBuyClick() {
        this.$message.warning('购物车中没有商品，无法下单');
      },
      buy(){
        let amount = 0;
        for (let i = 0; i < this.list.length; i++) {
          amount = amount + this.list[i].price;
        }
        this.orderMsg = '总计 ' + amount +' 元，确认购买？';
      },
      doDelete(){
        this.$http.delete("/cart/delete?id=" + this.delId).then(result => {
          let R = result.data;
          this.$message.success(R.msg);
          this.refresh(1);
        })
      },
      doBuy(){
        this.$http.get("/cart/buy?account=" + window.sessionStorage.getItem("token")).then(result => {
          let R = result.data;
          this.$message.success(R.msg);
          this.refresh(1);
        })
      },
      deleteAllCart() {
        this.$http.delete("/cart/deleteAllByAccount?account=" + window.sessionStorage.getItem('token')).then(result => {
          let R = result.data;
          if (R.code === 2000) {
            this.$message.success(R.msg);
            this.refresh(1);
          } else {
            this.$message.error(R.msg);
          }
        })
      },

    },
    created() {
      this.refresh();
    }
  }
</script>

<style scoped>
.cart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  }

.header-card {
  margin-bottom: 0;
  }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-title {
  margin: 0;
  color: #303133;
}

.buy {
  margin: 0;
  }

.table-card {
  flex: 1;
  overflow: hidden;
}

.my-el-table {
  height: 100%;
  }

/* 删除不需要的样式 */
.search-input,
.updateForm,
.btn-release,
.form-releaseTask,
  .input-content-task {
  display: none;
  }
</style>
